<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<meta charset="UTF-8">
<title>黔彩便利加盟申请表</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet"
	href="${contextPath}/static/statistics/layui/css/layui.css" />
	<link rel="stylesheet" href="${contextPath}/static/jeDate-test.css">
	<link rel="stylesheet" href="${contextPath}/static/jedate.css">
</head>
<style>
	body{
		margin: 0px;
		padding: 0px;
	}
	span {
		margin: 5px 7px;
	}
      font{
      	color: red;
      	font-size: 15px;
      	vertical-align: middle;
      }
      select{
      	border-radius: 4px;
      	height: 33px;
      	border: 1px solid #DCE4EB;
      	color:#B3B3B3;
      	width:90%;
		font-size:17px;
		-webkit-appearance:none;
		background: url(${contextPath}/static/image/select.png) no-repeat;
		background-position:98% 50%;
     	padding-left:5px;
     	background-size: 16px 18px;
      }
      input,select,option,textarea{
		outline:none;
	  }
	#nextButton{
		width: 90%;
		height: 47px;
		border-radius: 4px;
		margin-bottom: 28px;
		background-color: #408170;
		color:white;
		margin-top: 10px;
		border: none;
		outline: none;
	}
	.span_title{
		color: #1D1D1D;
		font-size: 16px;
		margin-left: 22px;
	}
	.span_head{
		color: #408170;
		margin-left: 22px;
		font-size: 19px;
		font-weight: bold;
	}
	.div_content{
		margin-top: 10px;
		margin-bottom: 15px;
		text-align: center;
	}
	.input_content{
		border: 1px solid #DCE4EB;
		color:#434343;
		width:90%;
       	height: 33px;
       	border-radius: 4px;
       	font-size: 16px;
       	padding-left:5px;
	}
	/*弹窗CSS*/
	 #warning1{
		width: 100%;
		height: 100%;
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.5);
	}
	#layer_content1{
		background-color: white;
		width:288px;
		height:340px;
		margin:0px auto;
		position:absolute;
		left:50%;
		top:50%;
		margin-left: -144px;
		margin-top: -170px;
		text-align: center;
		background-color: #FFFFFF;
		border-radius:5px;
	}
	#warning{
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.5);
	}
	#layer_content{
		background-color: white;
		width:200px;
		height:150px;
		margin:0px auto;
		position:absolute;
		left:50%;
		top:50%;
		margin-left: -100px;
		margin-top: -75px;
		text-align: center;
		background-color: #FFFFFF;
		border-radius:5px;
	}
</style>
			
<body>
	<div>
		<div>
			<div>
			<form id="baseForm">
				<div style="margin-top: 30px;margin-bottom: 30px;">
					<span class="span_head">基本资料</span>
				</div>
				<div>
					<span class="span_title">姓名</span><font>*</font>
					<div class="div_content">
						<input type="text" class="input_content" id="name" name="name"><br/>
					</div>
					<span class="span_title">性别</span><font >*</font>
					<div class="div_content">
						<select class="selectEle" id="sex" name="sex"  >
							<option value="" id="onew" disabled selected style='display:none;'>请选择</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
						<input type="text" id="validateSex" class="input_content" value="性别不能为空" style="display:none;color:red;font-size:13px;">
					</div>
					<span class="span_title">身份证号码</span><font >*</font>
					<div class="div_content">
						<input type="text" maxlength='18' onchange="getAge()" id="idCardNo" name="idCardNo" class="input_content"><br/>
					</div>
					<span class="span_title">年龄</span><font >*</font>
					<div class="div_content">
						<input type="text" readonly oninput="if(value.length>3)value=value.slice(0,3)" id="age" name="age"  class="input_content"><br/>
					</div>
					<span class="span_title">学历</span>
					<div class="div_content">
						<input type="text" id="education" name="education" class="input_content">
					</div>
					<span class="span_title">联系电话</span>
					<div class="div_content">
						<input type="text" maxlength='11' id="contactNumber" name="contactNumber" class="input_content">
					</div>
					<span class="span_title">手机号码</span><font >*</font>
					<div class="div_content">
						<input type="text" maxlength='11' id="phoneNumber" name="phoneNumber" class="input_content"><br/>
					</div>
					<span class="span_title">邮箱</span>
					<div class="div_content">
						<input type="text" id="email" name="email" class="input_content"><br/>
					</div>
					<span class="span_title">现行职业</span>
					<div class="div_content">
						<input type="text" id="job" name="job" class="input_content">
					</div>
					<span class="span_title">从事时间</span><font >*</font>
					<div class="div_content">
						<input style="display:none;" type="text" id="businessTimeStart" name="businessTimeStart" class="input_content">
						<input style="display:none;" type="text" id="businessTimeEnd" name="businessTimeEnd" class="input_content">
						<input type="text" id="workTime" name="workTime" class="input_content"><br/>
					</div>
					<span class="span_title">加盟主体</span><font >*</font>
					<div class="div_content">
						<select class="selectEle" id="joinBody" name="joinBody">
							<option value="" disabled selected style='display:none;'>请选择</option>
							<option value="1">个人</option>
							<option value="2">合伙</option>
							<option value="3">企业</option>
							<option value="4">其他</option>
						</select>
						<input type="text" id="validateJoinBody" class="input_content" value="加盟主体不能为空" style="display:none;color:red;font-size:13px;">
					</div>
					<div class="div_content">
						<button id="nextButton" onclick="examApplay()" type="button">下一步</button>						
					</div>
				</div>
				</form>
			</div>
		</div>
	</div>
	<!-- 弹窗内容开始 -->
 	 <div id="warning1">
		<div id="layer_content1">
			<p style="color:#000000;font-size:18px;font-weight:bolder;margin-top:26px;">加盟协议</p>
			<div style="margin:0 auto;width:249px;height:175px;color:#1D1D1D;
				 font-size:13px;margin-top:29px;text-align:justify;line-height:20px;">
				您是否认同黔彩便利品牌文化，愿意遵守加盟合同条款，
				愿意按照黔彩便利经营管理标准和制度体系规范要求经营和管理自己的门店，
				愿意按照黔彩便利加盟终端管理制度，自愿无偿配置门头双屏机、电脑、摄像头等经营设施设备，
				并且对投资开店存在的经营风险有较清醒的认识。
			</div>
			<div id="dibu" style="text-align: center;margin-bottom: 10px;margin-top:40px;">
				<a href="#" id="bt11" style="font-size:16px;margin-right:30px;">不同意</a>&nbsp;&nbsp;&nbsp;
				<a href="#" id="bt22" style="color:blue;font-size:16px;">同意并继续</a>
			</div>
		</div>
	</div>
	<!-- ggggggggggggggggggggggg -->
	<div id="warning">
		<div id="layer_content">
			<div style="text-align: right;">
				<span id="close" style="color: black;margin-right: 8px;">X</span>
			</div>
			<div style="margin:0 auto;color:#1D1D1D;font-size:15px;margin-top:29px;">
				目前是否有自己经营的店铺?
				<div id="dibu" style="text-align: center;margin-top:50px;">
					<a href="#" id="bt1" style="font-size:16px;margin-right:30px;">有</a>&nbsp;&nbsp;&nbsp;
					<a href="#" id="bt2" style="color:blue;font-size:16px;">没有</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 弹窗内容结束 -->
	<script src="${contextPath}/static/statistics/js/jquery.js"></script>
	<script src="${contextPath}/static/statistics/layui/layui.js"></script>
	<script src="${contextPath}/static/statistics/layui/layui.all.js"></script>
 	<script src="${contextPath}/static/jedate.js"></script>
	<script src="${contextPath}/static/demo.js"></script>
	<script src="${contextPath}/static/validform/joinApplayValidForm.js"></script>
	<!-- 下拉框选中的时候改变字体颜色 -->
	<script type="text/javascript">
		var sex = document.getElementById('sex');
		sex.onchange = function sex(){
			$("#sex").css('color','#434343');
		}
		
		var joinBody = document.getElementById('joinBody');
		joinBody.onchange = function joinBody(){
			$("#joinBody").css('color','#434343');
		}
	</script>
	<!-- 提示信息弹窗js -->
	<script type="text/javascript">
		var warning = document.getElementById('warning1');
		var close = document.getElementById('close'); 
		var bt11 = document.getElementById('bt11');
		var bt22 = document.getElementById('bt22');
		
		warning.style.display = "block";
		 
		close.onclick = function close() {
			warning.style.display = "none";
		} 
		bt11.onclick = function turn(){
			//window.location.href='shopSituations';
			//关闭安卓系统的手机
			document.addEventListener('WeixinJSBridgeReady', function() {
				WeixinJSBridge.call('closeWindow');
			}, false);
			//关闭ios系统的手机
			WeixinJSBridge.call('closeWindow');
	        //window.open("about:blank","_self").close();
			warning.style.display = "none";
		}
		bt22.onclick = function turn(){
			//window.location.href='joinApplay';
			warning.style.display = "none";
		}
	</script>
	<!-- 加盟申请js -->
	<script type="text/javascript">
	function getAge(){
		var idCardNo = $("#idCardNo").val();
		if(idCardNo == "" || idCardNo == null){
			document.getElementById("idCardNo").value = '身份证号不能为空';
			$("#idCardNo").css('color','red');
			$("#idCardNo").css('font-size','13px');
			$("html,body").animate({scrollTop:$("#idCardNo").offset().top},10)
			$("#idCardNo").on('click',function(){
				document.getElementById("idCardNo").value = '';
				$("#idCardNo").css('color','#434343');
				 $("#idCardNo").css('font-size','16px');
			});
			return;
		}else{
			var flag = IdCardRegCheck(idCardNo);
			console.log(flag);
			 if(flag == false){
				 document.getElementById("idCardNo").value = '无效身份证号码';
				 $("#idCardNo").css('color','red');
				 $("#idCardNo").css('font-size','13px');
				  $("html,body").animate({scrollTop:$("#idCardNo").offset().top},10);
				  $("#idCardNo").on('click',function(){
					  document.getElementById("idCardNo").value = '';
						$("#idCardNo").css('color','#434343');
						 $("#idCardNo").css('font-size','16px');
				   });
				  return;
			 }else{
				 var idCardNo = $("#idCardNo").val();
				 var date = new Date();
				 var year = date.getFullYear();
				 var birthday_year = parseInt(idCardNo.substr(6, 4));
				 var userage = year - birthday_year;
				 $('#age').val(userage);
			 }
		}
	}
	/* 加盟申请   */     
	 function examApplay(){ 
	    var name = $("#name").val();
		if(name == "" || name == null){
			document.getElementById("name").value = '姓名不能为空';
			$("#name").css('color','red');
			$("#name").css('font-size','13px');
			$("html,body").animate({scrollTop:$("#name").offset().top},10)
			$("#name").on('click',function(){
				document.getElementById("name").value = '';
				 $("#name").css('color','#434343');
				 $("#name").css('font-size','16px');
			});
			return;
		}else{
			var name2 = $("#name").val();
			var flag = SpecialWordRegCheck(name);
			if(flag == false){
				document.getElementById("name").value = '姓名不能包含特殊字符';
			    $("#name").css('color','red');
			    $("#name").css('font-size','13px');
				$("html,body").animate({scrollTop:$("#name").offset().top},10)
				$("#name").on('click',function(){
					document.getElementById("name").value = '';
					$("#name").css('color','#434343');
					$("#name").css('font-size','16px');
				});
				return;
			}else if(name2 == '姓名不能为空'){
				$("html,body").animate({scrollTop:$("#name").offset().top},10)
				return;
			}
		}
		
		
		var sex = $("#sex").val();
		if(sex == "" || sex == null){
			$("#sex").hide();
			$("#validateSex").show();
			$("html,body").animate({scrollTop:$("#validateSex").offset().top},10);
			$("#validateSex").on('click',function(){
				$("#sex").show();
				$("#validateSex").hide();
			});
			 return;
		}
		
		var phoneNumber = $("#phoneNumber").val();
		if(phoneNumber == "" || phoneNumber == null){
			document.getElementById("phoneNumber").value = '手机号不能为空';
			 $("#phoneNumber").css('color','red');
			 $("#phoneNumber").css('font-size','13px');
			$("html,body").animate({scrollTop:$("#phoneNumber").offset().top},10)
			$("#phoneNumber").on('click',function(){
				document.getElementById("phoneNumber").value = '';
				$("#phoneNumber").css('color','#434343');
				 $("#phoneNumber").css('font-size','16px');
			});
			return;
		}else{
			var flag = NumRegCheck(phoneNumber);
			if(flag == false){
				document.getElementById("phoneNumber").value = '手机格式不正确';
				 $("#phoneNumber").css('color','red');
				 $("#phoneNumber").css('font-size','13px');
				$("html,body").animate({scrollTop:$("#phoneNumber").offset().top},10)
				$("#phoneNumber").on('click',function(){
					document.getElementById("phoneNumber").value = '';
					$("#phoneNumber").css('color','#434343');
					 $("#phoneNumber").css('font-size','16px');
				});
				return;
			}
		}
		var email = $("#email").val();
		console.log(email);
		if(email != "" && email != null){
			var flag = EmailRegCheck(email);
			if(flag == false){
				 document.getElementById("email").value = '邮箱格式不正确';
				 $("#email").css('color','red');
				 $("#email").css('font-size','13px');
				 $("html,body").animate({scrollTop:$("#email").offset().top},10)
				 $("#email").on('click',function(){
					 document.getElementById("email").value = '';
						$("#email").css('color','#434343');
						 $("#email").css('font-size','16px');
				 });
				return;
			}
		}
		var phoneNumber = $("#workTime").val();
		if(phoneNumber == "" || phoneNumber == null){
			 document.getElementById("workTime").value = '从事时间不能为空';
			 $("#workTime").css('color','red');
			 $("#workTime").css('font-size','13px');
			$("html,body").animate({scrollTop:$("#workTime").offset().top},10)
			$("#workTime").on('click',function(){
				 document.getElementById("workTime").value = '';
					$("#workTime").css('color','#434343');
					 $("#workTime").css('font-size','16px');
			});
			return;
		}
		var joinBody = $("#joinBody").val();
		if(joinBody == "" || joinBody == null){
			$("#joinBody").hide();
			$("#validateJoinBody").show();
			$("html,body").animate({scrollTop:$("#validateJoinBody").offset().top},10);
			$("#validateJoinBody").on('click',function(){
				$("#joinBody").show();
				$("#validateJoinBody").hide();
			});
			 return;
		}
		
		var baseForm = $("#baseForm").serializeArray();
		var params = {};
		for(var i in baseForm){
			params[baseForm[i].name] = baseForm[i].value;
		}
		var baseForm = JSON.stringify(params);
		//将表单数据存储到本地
		window.localStorage.setItem('params',baseForm);
		
		<!-- 弹窗js -->
   		var warning = document.getElementById('warning');
   		var close = document.getElementById('close'); 
   		var bt1 = document.getElementById('bt1');
   		var bt2 = document.getElementById('bt2');
   		
   		warning.style.display = "block";
   		 
   		close.onclick = function close(){
   			warning.style.display = "none";
   		} 
   		bt1.onclick = function turn(){
   			window.location.href='shopSituation';
   			warning.style.display = "none";
   		}
   		bt2.onclick = function turn(){
   			window.location.href='joinAttention';
   			warning.style.display = "none";
   		}
	}
	</script>
</body>
</html>